<?php
	require_once "top.php";
?>

	<!--link rel="stylesheet" type="text/css" href="engine1/style.css" /-->

	<!-- PARTE DINAMICA -->
	<?php
		//$_POST["nombreCategoria"]
		//$_POST["nombreProyecto"]
		//$_POST["idProyecto"]
		/*CREATE TABLE imagenes (
			id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
			id_proyecto INT UNSIGNED,
			path VARCHAR(254),
			titulo VARCHAR(128),
			observaciones TEXT
		);*/
		
		$sqlImagenes = "SELECT ima.id AS id, ima.nombreArchivo AS nombreArchivo, ima.titulo AS titulo".
							" FROM ".TABLE_IMAGENES." as ima".
							" WHERE ima.proyecto_id = ".$_POST["idProyecto"].
							" ORDER BY ima.orden";
		
		$rows = $db->query($sqlImagenes);
		
		$images = "";
		$bullets = "";
		$primerImagen = "";
		$cont = 0;
		
		if ($rows) {
			
			while ($record = $db->fetch_array($rows)) {
				
				//$liSlideShow = $liSlideShow.'<li><img src="images/portfolio/'.$_POST["nombreCategoria"].'/'.$_POST["nombreProyecto"].'/'.$record["nombreArchivo"].'" width="620" height="320" alt="'.$record["titulo"].'" /></li>';
				//$liPuntitos = $liPuntitos.'<li id="imagen'.($cont+1).'"><a href="#" >'.$cont.'</a></li>';
				//$liPuntitosPreview = $liPuntitosPreview.'<li><img src="images/portfolio/'.$_POST["nombreCategoria"].'/'.$_POST["nombreProyecto"].'/thumbs/'.$record["nombreArchivo"].'" width="125" alt="'.$record["titulo"].'" /></li>';
				
				$nombreProyecto = strtolower(str_replace(" ", "_", $_POST["nombreProyecto"]));
				$nombreCategoria = strtolower(str_replace(" ", "_",$_POST["nombreCategoria"]));
				
				//$images = $images . '<li><img src="images/portfolio/'.$_POST["nombreCategoria"].'/'.$nombreProyecto.'/'.$record["nombreArchivo"].'" alt="'.$record["titulo"].'" title="'.$record["titulo"].'" id="wows'.$cont.'"/></li>';
				//$bullets = $bullets . '<a href="#" title="'.$record["titulo"].'"><img src="images/portfolio/'.$nombreCategoria.'/'.$nombreProyecto.'/thumbs/'.$record["nombreArchivo"].'" alt="'.$record["titulo"].'"/>1</a>';
				
				if ($cont == 0) {
					$primerImagen = '<img src="images/portfolio/'.$nombreCategoria.'/'.$nombreProyecto.'/'.$record["nombreArchivo"].'" alt="'.$record["titulo"].'" title="'.$record["titulo"].'" id="bgimg" />';
				}
				
				//$arcaux = explode(".", $record["nombreArchivo"]);
				//$arcaux[0]."_thumb.".$arcaux[1]
				$images = $images . '<div class="content">'
					.'<div><a href="images/portfolio/'.$nombreCategoria.'/'.$nombreProyecto.'/'.$record["nombreArchivo"].'">'
						.'<img src="images/portfolio/'.$nombreCategoria.'/'.$nombreProyecto.'/thumbs/'.$record["nombreArchivo"].'" title="'.$record["titulo"].'" class="thumb" /></a></div>'
				.'</div>';
				
				$cont++;
			}
		}
	
	?>

	
	
	
	

<style type="text/css">
<!--
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light);
html,body{height:100%;}
*{outline:none;}
body{margin:0px; padding:0px; background:#000;}
#toolbar{position:fixed; z-index:3; right:10px; top:10px; padding:5px; background:url(images/fs_img_g_bg.png);}
#toolbar img{border:none;}
#img_title{position:fixed; z-index:3; left:10px; top:10px; padding:10px; background:url(images/fs_img_g_bg.png); color:#FFF; font-family:'Josefin Sans Std Light', arial, serif; font-size:24px; text-transform:uppercase;}
#bg{position:fixed; z-index:1; overflow:hidden; width:100%; height:100%;}
#bgimg{display:none; -ms-interpolation-mode: bicubic;}
#preloader{position:relative; z-index:3; width:32px; padding:20px; top:80px; margin:auto;}
#thumbnails_wrapper{z-index:2; position:fixed; bottom:0; width:100%; background:url(images/empty.gif); /* stupid ie needs a background value to understand hover area */}
#outer_container{position:relative; padding:0; width:100%; margin:40px auto;}
#outer_container .thumbScroller{position:relative; overflow:hidden; background:url(images/fs_img_g_bg.png);}
#outer_container .thumbScroller, #outer_container .thumbScroller .container-galery, #outer_container .thumbScroller .content{height: 120px;}
#outer_container .thumbScroller .container-galery{position:relative; left:0;}
#outer_container .thumbScroller .content{float:left;}
#outer_container .thumbScroller .content div{margin:5px; height:100%;}
#outer_container .thumbScroller img{border:5px solid #fff;}
#outer_container .thumbScroller .content div a{display:block; padding:5px;}

.nextImageBtn, .prevImageBtn{display:block; position:absolute; width:50px; height:50px; top:50%; margin:-25px 10px 0 10px; z-index:3; filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity:0.4; opacity:0.4;}
.nextImageBtn:hover,.prevImageBtn:hover{filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8;}
.nextImageBtn{right:0; background:#000 url(images/nextImgBtn.png) center center no-repeat;}
.prevImageBtn{background:#000 url(images/prevImgBtn.png) center center no-repeat;}
-->
</style>

<div id="bg"><a href="#" class="nextImageBtn" title="next"></a><a href="#" class="prevImageBtn" title="previous"></a><?php echo $primerImagen; ?></div>
<div id="preloader"><img src="images/loader.gif" width="32" height="32" /></div>
<div id="img_title"></div>
<div id="toolbar">
	<a href="#" title="Maximizar" onClick="ImageViewMode('full');return false">
		<img src="images/toolbar_fs_icon.png" width="50" height="50"  />
	</a>
</div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="thumbScroller">
	<div class="container-galery">
		<?php echo $images; ?>
    	<!--
		<div class="content">
        	<div><a href="images/1.jpg"><img src="images/1.jpg" title="Denebola" alt="Denebola" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="images/2.jpg"><img src="images/2.jpg" title="Lux Aeterna" alt="Lux Aeterna" class="thumb" /></a></div>
        </div>
    	<div class="content">
        	<div><a href="images/3.jpg"><img src="images/3.jpg" title="X-Wing on patrol" alt="X-Wing on patrol" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="images/4.jpg"><img src="images/4.jpg" title="Albireo Outpost" alt="Albireo Outpost" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="images/5.jpg"><img src="images/5.jpg" title="Church of Heaven" alt="Church of Heaven" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="images/6.jpg"><img src="images/6.jpg" title="Decampment" alt="Decampment" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="images/7.jpg"><img src="images/7.jpg" title="Hibernaculum" alt="Hibernaculum" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="images/8.jpg"><img src="images/8.jpg" title="Supremus Lucernarium" alt="Supremus Lucernarium" class="thumb" /></a></div>
        </div>
		-->
	</div>
</div>
</div>
</div>
<script>
//config
//set default images view mode
$defaultViewMode="original"; //full, normal, original
$tsMargin=30; //first and last thumbnail margin (for better cursor interaction) 
$scrollEasing=600; //scroll easing amount (0 for no easing) 
$scrollEasingType="easeOutCirc"; //scroll easing type 
$thumbnailsContainerOpacity=0.8; //thumbnails area default opacity
$thumbnailsContainerMouseOutOpacity=0; //thumbnails area opacity on mouse out
$thumbnailsOpacity=0.6; //thumbnails default opacity
$nextPrevBtnsInitState="show"; //next/previous image buttons initial state ("hide" or "show")
$keyboardNavigation="on"; //enable/disable keyboard navigation ("on" or "off")

//cache vars
$thumbnails_wrapper=$("#thumbnails_wrapper");
$outer_container=$("#outer_container");
$thumbScroller=$(".thumbScroller");
$thumbScroller_container=$(".thumbScroller .container-galery");
$thumbScroller_content=$(".thumbScroller .content");
$thumbScroller_thumb=$(".thumbScroller .thumb");
$preloader=$("#preloader");
$toolbar=$("#toolbar");
$toolbar_a=$("#toolbar a");
$bgimg=$("#bgimg");
$img_title=$("#img_title");
$nextImageBtn=$(".nextImageBtn");
$prevImageBtn=$(".prevImageBtn");

$(function() {
	//TOBI si estoy desde un celular oculto el thumb
	if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
		$(".thumbScroller").hide();
	}
	
	//TOBI EL TIMEOUT ES PARA EVITAR QUE SE MAMBEE EN ALGUNOS EXPLORADORES
	setTimeout( function() {
		
		$toolbar.data("imageViewMode",$defaultViewMode); //default view mode
		if($defaultViewMode=="full"){
			$toolbar_a.html("<img src='images/toolbar_n_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restaurar");
		} else {
			$toolbar_a.html("<img src='images/toolbar_fs_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximizar");
		}
	
		//TOBI por default lo dejo normal
		//ImageViewMode('normal');
	
		//TOBI agrego boton cerrar
		$toolbar.append('<a href="#" title="Cerrar" onClick="$cerrarPopupImagenes();">'
								+ '<img src="images/boton-cerrar-B.gif" width="40" height="40"  style="margin: 0 0 4px 0;"/>'
						+ '</a>');
	
		ShowHideNextPrev($nextPrevBtnsInitState);
		//thumbnail scroller
		$thumbScroller_container.css("marginLeft",$tsMargin+"px"); //add margin
		sliderLeft=$thumbScroller_container.position().left;
		sliderWidth=$outer_container.width();
		$thumbScroller.css("width",sliderWidth);
		var totalContent=0;
		fadeSpeed=200;
	
		var $the_outer_container=document.getElementById("outer_container");
		var $placement=findPos($the_outer_container);
	
		//SUMA TODOS LOS ANCHOS DE LAS IMAGENES
		$thumbScroller_content.each(function () {
			var $this=$(this);
			totalContent+=$(this).innerWidth();
			$thumbScroller_container.css("width",totalContent);
			$this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity);
		});

		$thumbScroller.mousemove(function(e){
			if($thumbScroller_container.width()>sliderWidth){
				var mouseCoords=(e.pageX - $placement[1]);
				var mousePercentX=mouseCoords/sliderWidth;
				var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX));
				var thePosA=mouseCoords-destX;
				var thePosB=destX-mouseCoords;
				if(mouseCoords>destX){
					$thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing
				} else if(mouseCoords<destX){
					$thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing
				} else {
					$thumbScroller_container.stop();  
				}
			}
		});

		$thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity);
		$thumbnails_wrapper.hover(
			function(){ //mouse over
				var $this=$(this);
				$this.stop().fadeTo("slow", 1);
			},
			function(){ //mouse out
				var $this=$(this);
				$this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity);
			}
		);

		$thumbScroller_thumb.hover(
			function(){ //mouse over
				var $this=$(this);
				$this.stop().fadeTo(fadeSpeed, 1);
			},
			function(){ //mouse out
				var $this=$(this);
				$this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity);
			}
		);

		//on window resize scale image and reset thumbnail scroller
		$(window).resize(function() {
			FullScreenBackground("#bgimg",$bgimg.data("newImageW"),$bgimg.data("newImageH"));
			$thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc"); 
			var newWidth=$outer_container.width();
			$thumbScroller.css("width",newWidth);
			sliderWidth=newWidth;
			$placement=findPos($the_outer_container);
			
		
			//MAGIA DE CENTRADO LO DEJO COMENTADO POR SI LO LLEGA A PEDIR
			var ancho = $(".container-galery").css("width").split("px")[0];
			//si pasa esto centro los thumbs
			if (ancho < (window.innerWidth - 20)) {
				$(".container-galery").css("margin-left", "-" + (ancho/2) + "px");
				$(".container-galery").css("left", "50%");
			}
		
		});

		//load 1st image
		var the1stImg = new Image();
		the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload);
		the1stImg.src = $bgimg.attr("src");
		$outer_container.data("nextImage",$(".content").first().next().find("a").attr("href"));
		$outer_container.data("prevImage",$(".content").last().find("a").attr("href"));
		
		}, 500);
});

function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){
	$this.fadeOut("fast",function(){
		$this.attr("src", "").attr("src", imgSrc); //change image source
		FullScreenBackground($this,imageWidth,imageHeight); //scale background image
		$preloader.fadeOut("fast",function(){$this.fadeIn("slow");});
		var imageTitle=$img_title.data("imageTitle");
		if(imageTitle){
			$this.attr("alt", imageTitle).attr("title", imageTitle);
			$img_title.fadeOut("fast",function(){
				$img_title.html(imageTitle).fadeIn();
			});
		} else {
			$img_title.fadeOut("fast",function(){
				$img_title.html($this.attr("title")).fadeIn();
			});
		}
	});
}

//mouseover toolbar
if($toolbar.css("display")!="none"){
	$toolbar.fadeTo("fast", 0.4);
}
$toolbar.hover(
	function(){ //mouse over
		var $this=$(this);
		$this.stop().fadeTo("fast", 1);
	},
	function(){ //mouse out
		var $this=$(this);
		$this.stop().fadeTo("fast", 0.4);
	}
);

//Clicking on thumbnail changes the background image
$("#outer_container a").click(function(event){
	event.preventDefault();
	var $this=$(this);
	GetNextPrevImages($this);
	GetImageTitle($this);
	SwitchImage(this);
	ShowHideNextPrev("show");
}); 

//next/prev images buttons
$nextImageBtn.click(function(event){
	event.preventDefault();
	SwitchImage($outer_container.data("nextImage"));
	var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
	GetNextPrevImages($this);
	GetImageTitle($this);
});

$prevImageBtn.click(function(event){
	event.preventDefault();
	SwitchImage($outer_container.data("prevImage"));
	var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
	GetNextPrevImages($this);
	GetImageTitle($this);
});

//next/prev images keyboard arrows
if($keyboardNavigation=="on"){
$(document).keydown(function(ev) {
    if(ev.keyCode == 39) { //right arrow
        SwitchImage($outer_container.data("nextImage"));
		var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
		GetNextPrevImages($this);
		GetImageTitle($this);
        return false; // don't execute the default action (scrolling or whatever)
    } else if(ev.keyCode == 37) { //left arrow
        SwitchImage($outer_container.data("prevImage"));
		var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
		GetNextPrevImages($this);
		GetImageTitle($this);
        return false; // don't execute the default action (scrolling or whatever)
    }
});
}

function ShowHideNextPrev(state){
	if(state=="hide"){
		$nextImageBtn.fadeOut();
		$prevImageBtn.fadeOut();
	} else {
		$nextImageBtn.fadeIn();
		$prevImageBtn.fadeIn();
	}
}

//get image title
function GetImageTitle(elem){
	var title_attr=elem.children("img").attr("title"); //get image title attribute
	$img_title.data("imageTitle", title_attr); //store image title
}

//get next/prev images
function GetNextPrevImages(curr){
	var nextImage=curr.parents(".content").next().find("a").attr("href");
	if(nextImage==null){ //if last image, next is first
		var nextImage=$(".content").first().find("a").attr("href");
	}
	$outer_container.data("nextImage",nextImage);
	var prevImage=curr.parents(".content").prev().find("a").attr("href");
	if(prevImage==null){ //if first image, previous is last
		var prevImage=$(".content").last().find("a").attr("href");
	}
	$outer_container.data("prevImage",prevImage);
}

//switch image
function SwitchImage(img){
	$preloader.fadeIn("fast"); //show preloader
	var theNewImg = new Image();
	theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload);
	theNewImg.src = img;
}

//get new image dimensions
function CreateDelegate(contextObject, delegateMethod){
	return function(){
		return delegateMethod.apply(contextObject, arguments);
	}
}

//new image on load
function theNewImg_onload(){
	$bgimg.data("newImageW",this.width).data("newImageH",this.height);
	BackgroundLoad($bgimg,this.width,this.height,this.src);
}

//Image scale function
function FullScreenBackground(theItem,imageWidth,imageHeight){
	var winWidth=$(window).width();
	var winHeight=$(window).height();
	if($toolbar.data("imageViewMode")!="original"){ //scale
		var picHeight = imageHeight / imageWidth;
		var picWidth = imageWidth / imageHeight;
		if($toolbar.data("imageViewMode")=="full"){ //fullscreen size image mode
			if ((winHeight / winWidth) < picHeight) {
				$(theItem).attr("width",winWidth);
				$(theItem).attr("height",picHeight*winWidth);
			} else {
				$(theItem).attr("height",winHeight);
				$(theItem).attr("width",picWidth*winHeight);
			};
		} else { //normal size image mode
			if ((winHeight / winWidth) > picHeight) {
				$(theItem).attr("width",winWidth);
				$(theItem).attr("height",picHeight*winWidth);
			} else {
				$(theItem).attr("height",winHeight);
				$(theItem).attr("width",picWidth*winHeight);
			};
		}
		$(theItem).css("margin-left",(winWidth-$(theItem).width())/2);
		$(theItem).css("margin-top",(winHeight-$(theItem).height())/2);
	} else { //no scale
		$(theItem).attr("width",imageWidth);
		$(theItem).attr("height",imageHeight);
		$(theItem).css("margin-left",(winWidth-imageWidth)/2);
		$(theItem).css("margin-top",(winHeight-imageHeight)/2);
	}
}

//Image view mode function - fullscreen or normal size
function ImageViewMode(theMode){
	$toolbar.data("imageViewMode", theMode);
	FullScreenBackground($bgimg,$bgimg.data("newImageW"),$bgimg.data("newImageH"));
	if(theMode=="full"){
		$toolbar_a.html("<img src='images/toolbar_n_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restaurar");
	} else {
		$toolbar_a.html("<img src='images/toolbar_fs_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximizar");
	}
}

//function to find element Position
	function findPos(obj) {
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			curleft = obj.offsetLeft
			curtop = obj.offsetTop
			while (obj = obj.offsetParent) {
				curleft += obj.offsetLeft
				curtop += obj.offsetTop
			}
		}
		return [curtop, curleft];
	}
</script>
<script type='text/javascript'>
    $('#bg') .css({'height': (($(window).height()) - 40)+'px'});

    $(window).resize(function(){
        $('#bg') .css({'height': (($(window).height()) - 40)+'px'});
    });
</script>

